<template>
	<view class="my-page-con">
		<view class="my-page-content">
			<view class="flex-between">
				<view class="my-title">
					房源资产 <span class="grey-tips mr10 ml10">{{fileList.length}}/10 </span> <span
						class="grey-tips">(不对外展示) </span>
				</view>
			</view>
			<view class="grey-tips mb20">
				支持上传图片或文档.doc, .xls，单张图片不超过10MB；单个文件不超过100MB
			</view>


			<van-uploader @delete="deleteFile" accept="all" max-count="10" :file-list="fileList"
				@after-read="afterRead">
			</van-uploader>


			<view class="my-m-title">补充说明</view>
			<van-field custom-class="my-textare-class" :value="formData.assets_desc" maxlength="500"
				show-word-limit="true" label=" " :title-width="0" type="textarea" placeholder="请输入" autosize
				:border="false" @change="changeDes" />

		</view>
		<footBtn btnText="确定" @nextStep="nextStep"></footBtn>
	</view>
</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue';
	export default {
		components: {
			footBtn,
		},
		data() {
			return {
				formData: {
					id: this.$getStorage('houseId'),
					assets: [], //否	array	资产照片文件路径数组
					assets_desc: '' //否	string	资产附加说明
				},
				fileList: []
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.getFormData();
			},
			changeDes(e) {
				this.formData.assets_desc = e.detail;
			},
			getFormData() {
				this.$http.getMyHouseInfo(this.formData.id).then(res => {
					this.formData.assets_desc = res.assets_desc;
					this.fileList = res.assets || [];
				})
			},
			// showImg() {
			// 	uni.previewImage({
			// 		urls: ['https://vihome.s3.ca-central-1.amazonaws.com/mini-app-static/passport-sample.png']
			// 	})
			// },
			getFileExtensionFromUrl(url) {
				const extension = url.split('.').pop();
				return extension; // .xls  .doc  .xlsx 
			},
			deleteFile(event) {
				const {
					index
				} = event.detail;
				this.fileList.splice(index, 0)
			},
			afterRead(event) {
				const {
					file
				} = event.detail;
				uni.showLoading({
					title: '上传中',
					mask: true // 显示透明遮罩
				});
				const fileUrl = file.url;
				const data = [{
						name: 'file',
						url: fileUrl
					},
					{
						type: 'assets'
					}
				];
				this.$uploadFile(...data).then(res => {
					let fileType = this.getFileExtensionFromUrl(fileUrl);
					this.fileList.push({
						file: res.filepath,
						url: res.url,
						fileType,
						name: file.name
					});
					uni.hideLoading();
					this.$forceUpdate();
				})
			},
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					this.$setStorage('userInfo', res)
				})
			},
			nextStep() {
				this.formData.assets = this.fileList
				this.$http.setHouseBaseInfo(this.formData).then(res => {
					uni.navigateBack({
						delta:1,
						success: function() {
							// _this.reloadPage()
						}
					});
					this.$toast('保存成功')
				});

			}
		}
	}
</script>

<style>
</style>